<?
	require_once('../inc/facebook.php');
	$facebook = new Facebook(array(
		'appId' => '459317670792276',
		'secret' => '3e4736c48fcac0d0ca2cadf0fdd791fd'
	));
	
	$fbUser = $facebook->getUser();
	//echo $facebook->getAccessToken();
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home Page</title>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="../inc/bootstrap.css">
    <style type="text/css" >
    	.error { color: red; }
		input.error { border-color: red; }
		.item {
			width: 150px;
			float: left;
			margin: 5px;
		}
		.cart {
			clear: both;
			float: right;
		}
		.cart img {
			width: 20px;
		}
		.img-wrapper{
			height: 150px;
		}
	</style>
</head>

<body>
        <? include('../inc/header.php'); ?>
        <div class="container">
			<? include('../inc/nav.php'); ?>
			<? if($fbUser): ?>
				<img src="http://graph.facebook.com/<?=$fbUser?>/picture" />
				<a href="<?=$facebook->getLogoutUrl()?>">Log Out</a>
			<? else: ?>
				<a href="<?=$facebook->getLoginUrl(array('scope' => 'read_stream, friends_likes'))?>">
					Log in with Facebook
				</a>
			<? endif; ?>
            <div id="contents">
            	
            
            </div>
       </div>
       
    <script id="cart_template" type="text/x-handlebars-template">
	  <ul class="unstyled cart">
	  {{#each items}}
	  	{{> t_cart_item}}
	  {{/each}}	  	
	  </ul>
	</script>
	<script id="cart_item_partial_template" type="text/x-handlebars-template">
	  <li id="cart_item_{{id}}">
	  	<img src="../Static/img/products/{{id}}.jpg"/>
	    {{id}}
	  	<input type="number" name="quantity" value="{{count}}" />
	  </li>
	</script>
	<script id="products_template" type="text/x-handlebars-template">
	  {{#each aaData}}
	  	<div class="item">
	  		<div class="img-wrapper">
	  			<img src="../Static/img/products/{{id}}.jpg" />	  			
	  		</div>
	  		<h6>
	  			{{Name}}
	  			<span class="badge badge-important">{{Quantity}}</span>
	  		</h6>
	  		<h5>Our Price: ${{Price}}</h5>
	  		<a class="add-to-cart-link" href="../Api/Cart.php?id={{id}}">
	  			<img src="../Static/img/btn_add_to_cart.png" />
	  		</a>
	  	</div>  
	  {{/each}}
	</script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js">
	</script>
	<script type="text/javascript">
		$(function(){
			var t_cart = Handlebars.compile($("#cart_template").html());
			var t_cart_item = Handlebars.compile($("#cart_item_partial_template").html());
			var t_products = Handlebars.compile($("#products_template").html());
			Handlebars.registerPartial('t_cart_item', t_cart_item);
			
			
			$.get('../Api/Products.php', function(data){
						$("#contents").html(t_products(data));
			},'json');
			
			$.get('../Api/Cart.php', function(data){
				    var values = $.map( data, function( value, index ) {
				      return value;
				    }); 
					$("#contents").before(t_cart({items: values}));			
			},'json');
			
			$(".add-to-cart-link").live('click',function(){
				$.post(this.href, {_method: 'POST', count: 1}, function(data){
					if($("#cart_item_" + data.id).length > 0)
							$("#cart_item_" + data.id).replaceWith(t_cart_item(data));
					else
							$(".cart").append(t_cart_item(data));
				},'json');
				return false;
			});
		})
	</script>
       
</body>
</html>


